<template>
  <div class="_wz_DangerShipperAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="80" :rules="ruleValidate">
      <FormItem label="运输企业" prop="deptUuid">
        <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable>
          <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
        </i-select>
      </FormItem>
      <FormItem label="客户类型" prop="companyType">
        <i-select v-model.number="formData.companyType" filterable placeholder="请选择客户类型" clearable>
          <Option :value="1">委托方</Option>
          <Option :value="2">确认方</Option>
        </i-select>
      </FormItem>
      <FormItem label="客户名称" prop="companyName">
        <i-input v-model="formData.companyName" placeholder="请填写客户名称" clearable />
      </FormItem>
      <FormItem label="联系人" prop="companyContacts">
        <i-input v-model="formData.companyContacts" placeholder="请填写联系人" clearable />
      </FormItem>
      <FormItem label="联系电话" prop="companyContactPhone">
        <i-input v-model="formData.companyContactPhone" placeholder="请填写联系电话" clearable />
      </FormItem>
      <FormItem label="客户地址" prop="companyAddress">
        <i-input v-model="formData.companyAddress" placeholder="请填写地址" clearable />
      </FormItem>
    </Form>
    <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
  export default {
    props: ['selectData'],//接收来自父组件的数据
    data() {
      return {
        subDeptList: [],//运输企业
        spinShow:false,//本页加载
        formData: {
          pointItemIdList: [],
        },
        ruleValidate: {//正则
          contacts: [
            {required: true, message: '请填写联系人', trigger: 'blur'},
          ],
          contactPhone: [
            {required: true, message: '请填写联系电话', trigger: 'blur'},
            {
              validator: (rule, value, callBack) => {
                if (/^[1][0-9]{10}$/.test(value) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(value)) {
                  callBack()
                } else {
                  callBack('请输入手机号 或者 区号-座机号')
                }
              }, trigger: 'blur'
            }
          ],
          deptUuid: [
            { required: true, message: '请选择请选择运输企业', trigger: 'blur'}
          ],
          companyType: [
            {type: 'number', required: true, message: '请选择客户类型', trigger: 'blur'}
          ],
          companyName: [
            {required: true, message: '请填写客户名称', trigger: 'blur'},
          ],
        }
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      that.formData = JSON.parse(JSON.stringify(that.selectData));

      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
          if (!that.selectData.id) {
            that.formData.deptUuid = that.subDeptList[0].uuid;
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    methods: {//执行的方法
      //提交表单
      addSubmit(data) {
        let that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用
            that.spinShow = true;//显示加载
            that.axios.post(that.apiUrl.billBasicBillBasicCustomerSaveOrUpdate, that.formData).then(res => {
              that.spinShow = false;
              if (!!res) {
                that.$Message.success("操作成功");
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            that.$Message.error('请正确填写表单');
          }
        })
      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_DangerShipperAdd {
    padding-bottom: 53px;
  }
</style>
